<template>
  <el-container style="width: 800px">
    <el-main>
      <el-card :body-style="{ padding: '10px' }">
        <div class="rq">
          <el-image
            class="avatar"
            :src="head"
            :preview-src-list="srcList"
          >
            <div slot="error" class="image-slot" fit="scale-down">
              <i class="el-icon-picture-outline"></i>
            </div>
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
          <div class="ms">
            <div class="un">
              <h3>{{ name }}</h3>
            </div>
            <div class="jdt">
              <span>经验</span>
              <el-progress
                class="zs"
                :text-inside="true"
                :stroke-width="20"
                :percentage="experience"
                :format="format"
                status="exception"
              ></el-progress>
            </div>
          </div>
          <div class="setBut">
            <el-button icon="el-icon-s-tools" @click="toSetting"></el-button>
          </div>
        </div>
        <el-divider></el-divider>
        <div>
          <span>关注 {{ numberOfConcerns ?  numberOfConcerns : 0}}</span>
          <span>粉丝 {{ numberOfFans ? numberOfFans : 0}}</span>
        </div>
      </el-card>

      <div class="rk">
        <el-card shadow="never" class="kp">
          ￥ 账户余额
          <div class="da">
            <span class="prominent">{{ balance }}</span
            >起点币
          </div>
          充值
        </el-card>
        <el-card shadow="never" class="kp">
          <span class="el-icon-s-management"></span> 我的书架
          <div class="da">
            <span class="prominent">{{ numberOfBooksCollected }}</span
            >本藏书
          </div>
          <span @click="toBookRack">立即查看</span>
        </el-card>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { userInquire } from "@/api";
export default {
  data() {
    return {
      //用户信息
      head:"",
      name: "",
      numberOfConcerns: "",
      numberOfFans: "",
      balance: "",
      numberOfBooksCollected: "",
      experience: 0,
      //头像预览
      srcList: [
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      ],
    };
  },

  created() {
    this.getData();
  },
  methods: {
    toBookRack(){
      this.$store.commit("routeJump/openBookrack");
    },
    //经验显示
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}/100`;
    },
    //前往设置页面
    toSetting() {
      this.$store.commit("routeJump/toSettingUserInfo");
    },
    getData() {
      userInquire()
        .then(({ data }) => {
          console.log(data,"------------userInquire-------------");
          
          this.numberOfConcerns = data.data.attentionCount;
          this.numberOfFans = data.data.fansCount;
          this.balance = data.data.tokensBalance;
          this.numberOfBooksCollected = data.data.book;
          this.name = data.data.nickName;
          this.head = data.data.headPortraitUrl;
          this.experience = this.isNumeric(data.data.experience) ? data.data.experience * 0.1 : 0;
          console.log(data.data.book);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    isNumeric(value) {
      // 处理空字符串、空白字符串和布尔值的情况
      if (typeof value === 'boolean' || value === '' || (typeof value === 'string' && value.trim() === '')) {
        return false;
      }
      
      // 处理null和undefined
      if (value === null || value === undefined) {
        return false;
      }
      
      // 数值类型且不是NaN
      if (typeof value === 'number') {
        return !isNaN(value);
      }
      
      // 字符串类型：检查是否能转换为有效数字
      if (typeof value === 'string') {
        // 去除前后空格
        const str = value.trim();
        // 检查是否为科学计数法、十六进制、八进制等情况
        return !isNaN(str) && 
              !isNaN(parseFloat(str)) && 
              /^[-+]?(\d+\.?\d*|\.\d+)([eE][-+]?\d+)?$/.test(str);
      }
      // 其他类型（如对象、函数等）
      return false;
    }
  },
};
</script>

<style scoped>
.rq {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: nowrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: flex-start;
}
.avatar {
  width: 120px;
  height: 120px;
  border-radius: 120px;
}
.jdt {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: nowrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: flex-start;
  height: 50%;
  align-items: center;
}
.ms {
  margin-left: 20px;
}
.un {
  height: 50%;
  display: flex;
  align-items: center;
}
.un > h3 {
  font-size: 1.25em;
  font-weight: 600;
  /* line-height: 20px; */
}
.zs {
  width: 300px;
}
.setBut {
  height: 60px;
  display: flex;
  align-items: center;
  margin-left: 220px;
}
.setBut button {
  font-size: 20px;
  padding: 10px;
  border-radius: 30px;
}
.rk {
  /* 容器指定为Flex布局 */
  display: flex;
  /* 主轴为水平方向，起点在左端。 */
  flex-direction: row;
  /* 如果一条轴线排不下，不换行。 */
  flex-wrap: wrap;
  /* 主轴上的对齐方式。两端对齐，项目之间的间隔都相等。 */
  justify-content: flex-start;
  margin-top: 20px;
}
.prominent {
  font-size: 1.5625em;
}
.da {
  border-bottom: 1px solid #e0deda;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.kp {
  width: 150px;
}
</style>